<!--
 * @Author: wangming
 * @Date: 2020-09-09 14:04:55
 * @LastEditors: wangming
 * @LastEditTime: 2021-08-17 15:02:35
 * @Description:添加类别按钮
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="600px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ isNew ? '新建' : '编辑' }}模版</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>

    <el-form class="pl30 pr30" :model="formData" ref="form" label-width="120px">
      <el-form-item
        label="模版KEY"
        prop="key"
        :rules="[
          { required: true, message: '模板KEY不能为空', trigger: 'change' },
          {
            pattern: COMMON_CODE_64I_REG.pattern,
            message: '请输入有效的模版KEY',
            trigger: 'change'
          }
        ]"
      >
        <template
          slot="label"
        >模版KEY
          <el-tooltip
            popper-class="custom-popper"
            :content="COMMON_CODE_64I_REG.message"
            placement="top"
          >
            <i class="el-icon-question" />
          </el-tooltip>
        </template>
        <el-input
          :disabled="!isNew"
          v-model="formData.key"
          style="width: 400px"
          placeholder="请输入模板KEY"
          :maxlength="64"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item
        label="模版名称"
        prop="name"
        :rules="[
          { required: true, message: '模板名称不能为空', trigger: 'change' }
        ]"
      >
        <el-input
          v-model="formData.name"
          style="width: 400px"
          placeholder="请输入模板名称"
          :maxlength="64"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item
        label="关联模型"
        prop="modelCode"
        :rules="[
          { required: true, message: '请选择关联模型', trigger: 'change' }
        ]"
      >
        <tree-select
          style="width: 400px"
          v-if="isNew"
          v-model="formData.modelCode"
          :loading="modelLoading"
          filterable
          :fieldMap="{
            value: 'code',
            label: 'name',
            disabled: 'disabled'
          }"
          :filterNodeMethod="filterNodeMethod"
          :treeData="modelList"
        />

        <el-input
          v-else
          disabled
          v-model="formData.modelName"
          style="width: 400px"
        ></el-input>
      </el-form-item>

      <el-form-item label="备注">
        <el-input
          type="textarea"
          v-model="formData.remark"
          style="width: 400px"
          placeholder="请输入备注"
          :maxlength="200"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { cloneDeep, debounce } from 'lodash'
import { filterNodeMethod } from '@/utils/treeSelectFormat'
import { COMMON_CODE_64I_REG } from '@/utils/reg'
import { getHmmodelfolderListTree } from '@/apis/paas/HmModelFolderController.js'
import {
  postHmprinttemplate,
  putHmprinttemplate
} from '@/apis/paas/HmPrintTemplateController.js'

export default {
  data () {
    this.loadModelList = debounce(this.loadModelList, 500)
    return {
      showVisible: false,
      filterNodeMethod,
      modelList: [],
      modelLoading: false,
      formData: {},
      callback: () => {},
      validator: (rule, value, callback) => {
        callback()
      },
      COMMON_CODE_64I_REG,
      isNew: true
    }
  },

  methods: {
    addForm (record = {}) {
      this.isNew = true
      this.formData = {
        ...record
      }
      return this.showModel()
    },

    editForm (record) {
      this.isNew = false
      this.formData = { ...record }
      return this.showModel()
    },

    showModel () {
      this.showVisible = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      this.loadModelList()
      return {
        then: (callback) => {
          if (typeof callback === 'function') {
            this.callback = callback
          }
        }
      }
    },

    loadModelList () {
      this.modelLoading = true
      getHmmodelfolderListTree()
        .then((res) => {
          res.forEach((node) => {
            node.type = 'folder'
          })
          this.modelList = this.createModelTreeNode(res)
        })
        .finally(() => {
          this.modelLoading = false
        })
    },

    async submit () {
      try {
        await this.$refs.form.validate()
        const { key, name, modelCode, remark } = this.formData
        let params = {}
        let request = null
        if (this.isNew) {
          params = { key, name, modelCode, remark, json: '' }
          request = postHmprinttemplate
        } else {
          params = { key, name, remark }
          request = putHmprinttemplate
        }
        for (const key in params) {
          params[key] =
            typeof params[key] === 'string' ? params[key].trim() : params[key]
        }
        request(params).then((key) => {
          this.showVisible = false
          this.callback()
        })
      } catch (error) {}
    },
    createModelTreeNode (tree) {
      return cloneDeep(tree).map((node) => {
        node.disabled = node.type === 'folder'
        if (node.modelResults) {
          node.id = 'folder' + node.id
          node.children = node.modelResults || []
          node.children.forEach((item) => {
            item._id = item.id
            item.name = `${item.name}(${item.code})`
          })
        }
        return node
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
